<?php
	$ls_gridname	= 'dtl_lembur';


// ----------------- >> Form Detail << ----------------- ?>
<script type="text/javascript">
	var controllerLembur = 'hrd_lembur';
    var idKaryawan = $('#id_karyawan_pk').val();

    function formatUang(val){ 
    	return formatNumeric(val,2); 
    }

	$(document).ready(function(){
		// Setup Form
		$('#form_<?php echo $ls_gridname; ?>').setupForm([
			{ name: 'id_lembur_pk', type:'text', size:'medium' },
			{ name: 'id_karyawan_fk', type:'text', size:'medium' },
			{ name: 'no_spl', type:'text', size:'medium', noempty:true  },
			{ name: 'id_periode_fk', data:<?php echo json_encode($listPeriode); ?> },
			{ name: 'id_jenis_lembur_fk', data:<?php echo json_encode($listJenisLembur); ?> },
			{ name: 'tgl_absen', type: 'date', size: 'short', noempty:true },
			{ name: 'tgl_lembur', type: 'date', noempty:true, size: 'short' },
			{ name: 'nilai', type: 'numeric', size:'medium' },
			{ name: 'uang_makan', type: 'numeric', size:'medium' },
			{ name: 'jam_mulai', type: 'text', noempty:true, size: 'short' },
			{ name: 'jam_selesai', type: 'text', noempty:true, size: 'short' },
			{ name: 'lama_jam_lembur', size: 'short' },
			{ name: 'jumlah', size: 'short' },
			{ name: 'ket_lembur', type: 'text', size:'long' },
		], {}, { prefix:'<?php echo $ls_gridname; ?>_' });

		$('#<?php echo $ls_gridname; ?>_lama_jam_lembur , #<?php echo $ls_gridname; ?>_jumlah').numberbox({
		    min:0,
		    precision:2
		});
		
		// Set Hidden Object
		$('#<?php echo $ls_gridname; ?>_id_lembur_pk').hide();
		
		// Create Dialog
		$('#form_<?php echo $ls_gridname; ?>_container').dialog({
			closed:true,
			modal:true,
			title: '_',
			width:550,
			height: 450,
			buttons:[{
				text:'Save',
				iconCls:'icon-save',
				handler:function(){
					var idPeriode = $('#id_periode_fk').val();
    				console.log("save "+idPeriode);
					$('#form_<?php echo $ls_gridname; ?>').submitForm('/'+controllerLembur+'/ajax_post/'+idKaryawan, { onComplete : function(){ $('#form_<?php echo $ls_gridname; ?>_container').dialog('close'); 
						$('#<?php echo $ls_gridname; ?>').datagrid('reload'); }} );
				}
			},{
				text:'Close',
				iconCls:'icon-cancel',
				handler:function(){
					$('#form_<?php echo $ls_gridname; ?>_container').dialog('close');
				}
			}]
		});

	});
</script>
<div id="form_<?php echo $ls_gridname; ?>_container" style="padding:5px;width:600px;height:400px;">
	<div id="form_<?php echo $ls_gridname; ?>">
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label">Periode</td>
        <td><input id="id_periode_fk" /><input id="id_lembur_pk" /></td>
    </tr>
    <tr>
        <td class="label">Jenis Lembur</td>
        <td><input id="id_jenis_lembur_fk" /></td>
    </tr>
    <tr>
        <td class="label">No Spl</td>
        <td><input id="no_spl" /></td>
    </tr>
    <tr>
        <td class="label">Tgl Absen - Lembur</td>
        <td><input id="tgl_absen" /><input id="tgl_lembur" /></td>
    </tr>
    <!-- <tr>
        <td class="label">Tanggal Absen</td>
        <td><input id="tgl_absen" /></td>
    </tr> -->
    <tr>
        <td class="label">Jam Mulai - Selesai (00:00)</td>
        <td><input id="jam_mulai" /> _ <input id="jam_selesai" /></td>
    </tr>
    <!-- <tr>
        <td class="label">Jam Selesai (00:00)</td>
        <td><input id="jam_selesai" /></td>
    </tr> -->
    <tr>
        <td class="label">Lama Lembur - Jumlah</td>
        <td><input id="lama_jam_lembur" /> _ <input id="jumlah" /></td>
    </tr>
    <!-- <tr>
        <td class="label">Jumlah</td>
        <td><input id="jumlah" /></td>
    </tr> -->
    <tr>
        <td class="label">Nilai</td>
        <td><input id="nilai" /></td>
    </tr>
    <tr>
        <td class="label">Uang Makan</td>
        <td><input id="uang_makan" /></td>
    </tr>
    <tr>
        <td class="label">Keterangan</td>
        <td><input id="ket_lembur" /></td>
    </tr>
    </table>
	</div>
</div>
<?php 



// ----------------- >> Table Detail << ----------------- ?>
<script type="text/javascript">
	function reloadTabelLembur() {
		var idPeriode = $('#id_periode_fk').val();
		$('#<?php echo $ls_gridname; ?>').datagrid('load',{
			idPeriode: idPeriode
		});
	}

	$(document).ready(function(){
		$('#<?php echo $ls_gridname; ?>').datagrid({
			url:gs_path+'/'+controllerLembur+'/getdata/'+idKaryawan,
			width:840,
			height:200,
			rownumbers:true,
			showFooter:true,
			<?php if($mode!='view'){ 
			// -->> Toolbar [Start]
			// Only Appear On Mode Create / Edit ?>
			toolbar:[{
				text:'Tambah',
				iconCls:'icon-add',
				handler:function(){
					if(aktif == false) {
						$.messager.alert('Info','Silahkan Klik Tombol Proses Terlebih Dahulu!','info');
					} else {
						resetError();
						$('#<?php echo $ls_gridname; ?>_id_lembur_pk').readonly();
						$('#form_<?php echo $ls_gridname; ?>_container').dialog('open');
						$('#form_<?php echo $ls_gridname; ?>').data('mode', 'create');
						$('#form_<?php echo $ls_gridname; ?>_container').prev().find('.panel-title').html('Tambah Data');
						
						$('#form_<?php echo $ls_gridname; ?>').resetForm();
						$('#form_<?php echo $ls_gridname; ?>').focusFirst();

						var idPeriode = $('#id_periode_fk').val();
						$('#<?php echo $ls_gridname; ?>_id_periode_fk').val(idPeriode);

						// $('#<?php echo $ls_gridname; ?>_lama_jam_lembur').numberbox('setValue', 0);
					}
					
				}
			},'-',{
				text:'Ubah',
				iconCls:'icon-edit',
				handler:function(){
					var oSel=$('#<?php echo $ls_gridname; ?>').datagrid('getSelected'); 
					if(oSel==null){ alert('Please select row!'); }
					else{ 
						resetError();
						$('#<?php echo $ls_gridname; ?>_id_lembur_pk').readonly();
						$('#form_<?php echo $ls_gridname; ?>_container').dialog('open');
						$('#form_<?php echo $ls_gridname; ?>').data('mode', 'edit');
						$('#form_<?php echo $ls_gridname; ?>_container').prev().find('.panel-title').html('Ubah Data');
						
						jsonToForm(oSel, {prefix:'<?php echo $ls_gridname; ?>_'});
						$('#form_<?php echo $ls_gridname; ?>').focusFirst();

						// Set nilai lama lembur dan jumlah
						$('#<?php echo $ls_gridname; ?>_lama_jam_lembur').numberbox('setValue', oSel.lama_jam_lembur);
						$('#<?php echo $ls_gridname; ?>_jumlah').numberbox('setValue', oSel.jumlah);
					}
				}
			},'-',{
				text:'Hapus',
				iconCls:'icon-remove',
				handler:function() {
					var oSel = $('#<?php echo $ls_gridname; ?>').datagrid('getSelected'); 
                    if (oSel == null) { 
                        $.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
                    } else { 
                        var url = gs_path+'/'+controllerLembur+'/ajax_delete?id_lembur_pk='+oSel.id_lembur_pk;
                        // Confirm Hapus
						$.messager.confirm('Confirm', 'yakin menghapus data ini?', function(r){
			                if (r){
			                    $.get( url, function(  ) {
								  	$('#<?php echo $ls_gridname; ?>').datagrid('reload');
								});
			                }
			            });
                    } 

				}
			}],<?php 
			} // -->> Toolbar [End]
			?>
			onClickRow:function(rowIndex){
				var lastIndex = $('#<?php echo $ls_gridname; ?>').data('selectedIndex');
				$('#<?php echo $ls_gridname; ?>').data('selectedIndex', rowIndex);
			},
			onLoadSuccess:function(){ }
		});
	});
	
</script>
<table id="<?php echo $ls_gridname; ?>" style="width:600;height:auto" singleSelect="true" idField="index_no" showFooter="true">
<thead>
    <tr>
    	<th field="id_lembur_pk" hidden="true"></th>
        <th field="id_periode_fk" width="100" hidden="true"></th>
        <th field="nama_jenis_lembur" width="100" >Jenis Lembur</th>
        <th field="no_spl" width="70" >No SPL</th>
        <th field="tgl_absen" width="80" >Tgl Absen</th>
        <th field="tgl_lembur" width="80" >Tgl Lembur</th>
        <th field="jam_mulai" width="50" >Mulai</th>
        <th field="jam_selesai" width="50" >Selesai</th>
        <th field="lama_jam_lembur" width="80" >Lama Lembur</th>
        <th field="jumlah" width="50" >Jumlah</th>
        <th field="nilai" width="70" formatter="formatUang">Nilai</th>
        <th field="uang_makan" width="80" formatter="formatUang">Uang Makan</th>
        <th field="ket_lembur" width="90" >Keterangan</th>
    </tr>
</thead>
</table>